<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <span class="title">网易严选</span>
      <van-search placeholder="搜索商品，共121080款好物" />
      <button class="login">登录</button>
    </div>

    <!-- 导航条 -->
    <van-tabs color="#ee0a24" line-height="1px" class="tab">
      <van-tab :title="'推荐 '"> </van-tab>
      <van-tab :title="'居家生活'"> </van-tab>
      <van-tab :title="'宠物生活 '"> </van-tab>
      <van-tab :title="'服饰鞋包 '"> </van-tab>
      <van-tab :title="'美食酒水 '"> </van-tab>
      <van-tab :title="'个护清洁 '"> </van-tab>
      <van-tab :title="'母婴亲子 '"> </van-tab>
      <van-tab :title="'运动旅行 '"> </van-tab>
      <van-tab :title="'数码家电 '"> </van-tab>
      <van-tab :title="'严选全球 '"> </van-tab>
      <van-icon name="arrow-down" />
    </van-tabs>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="black">
      <van-swipe-item
        v-for="(banner, index) in focusList"
        :key="index"
        class="swipe-item"
      >
        <img :src="banner.picUrl" class="img" />
      </van-swipe-item>
    </van-swipe>

    <!-- 三行字 -->
    <div class="icon">
      <div v-for="(icon, index) in policyDescList" :key="index">
        <img :src="icon.icon" class="picture" />
        <span>{{ icon.desc }}</span>
      </div>
    </div>

    <!-- 十个小图标 -->

    <div class="goods">
      <div class="item" v-for="(item, index) in kingKongList" :key="index">
        <van-image
          radius="20px"
          width="1.4667rem"
          height="1.4667rem"
          :src="item.picUrl"
        />
        <span class="goodName">{{ item.text }}</span>
      </div>
    </div>

    <div class="ad">
      <img
        src="https://yanxuan.nosdn.127.net/static-union/16613311758118f8.gif"
      />
      <img
        src="https://yanxuan.nosdn.127.net/static-union/16613286491f68e7.gif"
      />
    </div>

    <!-- 新人专享礼 -->
    <div class="new">一 新人专享礼 一</div>
    <!-- 新人专享礼包 -->
    <div class="gift">
      <div class="left">
        <span>新人专享礼包</span>
        <img src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" />
      </div>
      <div class="right">
        <div class="top">
          <div>
            <span>{{ indexActivityModule[0].title }}</span>
            <span>{{ indexActivityModule[0].subTitle }}</span>
          </div>
          <img :src="indexActivityModule[0].picUrl" />
        </div>
        <div class="bottom">
          <div>
            <span>{{ indexActivityModule[1].title }}</span>
            <span>{{ indexActivityModule[1].tag }}</span>
          </div>
          <img :src="indexActivityModule[1].picUrl" />
        </div>
      </div>
    </div>
    <!-- 类目热销榜 -->
    <div class="category">{{ categoryHotSellModule.title }}</div>

    <div class="categoryList">
      <div class="box">
        <div class="rank">
          <div class="rank-item">
            <div class="rank-item-left">
              <span>{{
                categoryHotSellModule.categoryList[0].categoryName
              }}</span>
              <span><van-icon name="minus" /></span>
            </div>
            <img :src="categoryHotSellModule.categoryList[0].picUrl" />
          </div>
        </div>
        <div class="rank">
          <div class="rank-item">
            <div class="rank-item-left">
              <span>{{
                categoryHotSellModule.categoryList[1].categoryName
              }}</span>
              <span><van-icon name="minus" /></span>
            </div>
            <img :src="categoryHotSellModule.categoryList[1].picUrl" />
          </div>
        </div>
      </div>
      <van-grid :border="false" :column-num="4" class="grid">
        <van-grid-item class="grid-item">
          <span>{{ categoryHotSellModule.categoryList[2].categoryName }}</span>
          <img :src="categoryHotSellModule.categoryList[2].picUrl" />
        </van-grid-item>
        <van-grid-item class="grid-item">
          <span>{{ categoryHotSellModule.categoryList[3].categoryName }}</span>
          <img :src="categoryHotSellModule.categoryList[3].picUrl" />
        </van-grid-item>
        <van-grid-item class="grid-item">
          <span>{{ categoryHotSellModule.categoryList[4].categoryName }}</span>
          <img :src="categoryHotSellModule.categoryList[4].picUrl" />
        </van-grid-item>
        <van-grid-item class="grid-item">
          <span>{{ categoryHotSellModule.categoryList[5].categoryName }}</span>
          <img :src="categoryHotSellModule.categoryList[5].picUrl" />
        </van-grid-item>
        <van-grid-item class="grid-item">
          <span>{{ categoryHotSellModule.categoryList[6].categoryName }}</span>
          <img :src="categoryHotSellModule.categoryList[6].picUrl" />
        </van-grid-item>
        <van-grid-item class="grid-item">
          <span>{{ categoryHotSellModule.categoryList[7].categoryName }}</span>
          <img :src="categoryHotSellModule.categoryList[7].picUrl" />
        </van-grid-item>
        <van-grid-item class="grid-item">
          <span>{{ categoryHotSellModule.categoryList[8].categoryName }}</span>
          <img :src="categoryHotSellModule.categoryList[8].picUrl" />
        </van-grid-item>
      </van-grid>
    </div>

    <div class="sleep">
      <div class="bottom">
        <img
          :src="sceneLightShoppingGuideModule[0].styleBanner.picUrl"
          alt=""
        />
        <span class="title">{{
          sceneLightShoppingGuideModule[0].styleBanner.title
        }}</span>
        <span class="desc">{{
          sceneLightShoppingGuideModule[0].styleBanner.desc
        }}</span>
      </div>
      <div class="bottom">
        <img
          :src="sceneLightShoppingGuideModule[0].styleBanner.picUrl"
          alt=""
        />
        <span class="title">{{
          sceneLightShoppingGuideModule[0].styleBanner.title
        }}</span>
        <span class="desc">{{
          sceneLightShoppingGuideModule[0].styleBanner.desc
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { homeData } from "../../api/reqhome";

export default {
  name: "Home",
  data() {
    return {
      focusList: [],
      policyDescList: [],
      kingKongList: [],
      indexActivityModule: [],
      categoryHotSellModule: [],
      sceneLightShoppingGuideModule: [],
      bigPromotionModule: [],
    };
  },
  mounted() {
    // indexActivityModule  新人专享礼数据
    // kingKongModule kingKongList 新人首发数据
    // sceneLightShoppingGuideModule  最下边数据
    // const result = await reqSidebarData(); //测试前台接口
    // console.log(result, "前台");
    this.getDataList();
  },
  methods: {
    async getDataList() {
      const res = await homeData();
      console.log(res);
      this.focusList = res.data.data.focusList;
      this.policyDescList = res.data.data.policyDescList;
      this.kingKongList = res.data.data.kingKongModule.kingKongList;
      this.indexActivityModule = res.data.data.indexActivityModule;
      this.categoryHotSellModule = res.data.data.categoryHotSellModule;
      this.sceneLightShoppingGuideModule =
        res.data.data.sceneLightShoppingGuideModule;
      this.bigPromotionModule = res.data.data.bigPromotionModule.floorList.cell;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 2rem;
  height: 1rem;
  background-color: red;

* {
  margin: 0;
  padding: 0;
}
.home {
  width: 10rem;
  height: 100%;
}
.home .header {
  width: 10rem;
  height: 1.1733rem;
  display: flex;
  align-items: center;
  padding: 0.2667rem;
}
.home .header .title {
  width: 1.8667rem;
  height: 0.5333rem;
  font-size: 0.4267rem;
  font-weight: 700;
}
.home .header .login {
  width: 0.9867rem;
  height: 0.5333rem;
  font-size: 0.3733rem;
  color: #dd1a21;
  border: 1px solid red;
}
.home .tab {
  width: 100%;
  display: flex;
}

.my-swipe {
  width: 100%;
  height: 4rem;
  :deep(.van-swipe-item) {
    width: 100%;
    height: 100%;
    .img {
      width: 100%;
      height: 100%;
    }
  }
}

.home .icon {
  width: 10rem;
  height: 0.96rem;
  padding: 0.4rem;
  font-size: 0.32rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.home .icon .picture {
  width: 0.2667rem;
  height: 0.2667rem;
}
.home .goods {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.home .goods .item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home .goods .item .goodName {
  font-size: 0.32rem;
}

.home .ad {
  width: 100%;
  height: 100%;
  display: flex;
  img {
    margin: 0.5333rem 0;
  }
  :nth-child(1) {
    width: 4.68rem;
    height: 2.48rem;
    padding-left: 0.2667rem;
    border-right: 0.1333rem solid #eee;
  }
  :nth-child(2) {
    width: 4.68rem;
    height: 2.48rem;
  }
}

/*新人专享礼样式*/

.home .new {
  text-align: center;
  font-size: 0.4267rem;
  margin-top: 1.0667rem;
}
.home .gift {
  padding: 0.5333rem;
  display: flex;
}
.home .gift .left {
  width: 4.5733rem;
  height: 5.7867rem;
  background: #f9e9cf;
  border-right: 0.1067rem solid #fff;
}
.home .gift .left span {
  padding: 0.3rem 0 0 0.3rem;
  font-size: 0.4267rem;
  display: block;
  margin-top: 0.2667rem;
}
.home .gift .left img {
  width: 3.44rem;
  height: 3.4267rem;
  margin: 0.5333rem 0.5333rem;
}
.home .gift .right {
  width: 4.5733rem;
  height: 5.7867rem;
  background: #fbe2d3;
}
.home .gift .right .top {
  width: 4.5733rem;
  height: 2.8667rem;
  display: flex;
  background: #fbe2d3;
  border-bottom: 0.1067rem solid #fff;
}
.home .gift .right .top div {
  margin: 0.2667rem 0 0 0.2667rem;
}
.home .gift .right .top :nth-child(1) {
  font-size: 0.4267rem;
}
.home .gift .right .top :nth-child(2) {
  font-size: 0.2667rem;
}
.home .gift .right .bottom {
  background: #fae7be;
  width: 4.5733rem;
  height: 2.8667rem;
  display: flex;
}
.home .gift .right .bottom div {
  width: 1.8667rem;
  margin: 0.1333rem 0 0 0.1333rem;
  display: flex;
  flex-direction: column;
}
.home .gift .right .bottom div :nth-child(1) {
  font-size: 0.4267rem;
}
.home .gift .right .bottom div :nth-child(2) {
  background: #cbb693;
  font-size: 0.32rem;
  color: white;
}
.home .gift .right .bottom img {
  margin-left: 0.1333rem;
}
/*类目热销榜样式*/
.home .category {
  font-size: 0.4267rem;
  padding: 0.5333rem;
}
.home .categoryList {
  width: 10rem;
  height: 8.1333rem;
  margin-bottom: 4rem;
}
.home .box {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 0.2667rem;
}
.home .rank {
  width: 50%;
  height: 2.6667rem;
  display: flex;
  background: #f9f3e4;
  justify-content: space-between;
  padding: 0.4rem;
  box-sizing: border-box;
  border: 0.1067rem solid #fff;
}
.home .rank .rank-item {
  display: flex;
  background: #f9f3e4;
}

.home .rank .rank-item .rank-item-left {
  display: flex;
  flex-direction: column;
}
.home .rank .rank-item .rank-item-left :nth-child(1) {
  width: 1.8667rem;
  height: 0.56rem;
  font-size: 0.3733rem;
}
.home .rank .rank-item .rank-item-left :nth-child(2) :nth-child(1) {
  width: 0.64rem;
  height: 0.0533rem;
  font-size: 0.8rem;
}
.home .grid {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.home .grid .grid-item {
  width: 25%;
  display: flex;
  word-break: break-all;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.home .grid .grid-item :nth-child(1) {
  font-size: 0.32rem;
}
.home .grid .grid-item :nth-child(2) {
  width: 1.6rem;
  height: 1.6rem;
}
.home .sleep {
  width: 100%;
  height: 0.4rem;
  display: flex;

  .bottom {
    width: 100%;
    height: 140px;

    position: relative;
    border-right: 2px solid black;

    .img {
      width: 100%;
      height: 100%;
    }
  }
}
.home .bottom .title {
  position: absolute;
  left: 0.48rem;
  top: 0.5333rem;
  font-size: 0.4267rem;
}
.home .bottom .desc {
  position: absolute;
  left: 0.48rem;
  top: 1.2rem;
  font-size: 0.2667rem;
  color: #eaeaea;

}
}
</style>

